<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link rel="shortcut icon" th:href="@{/favicon.ico}"/>
    <link th:href="@{/static/css/bootstrap.min.css}" rel="stylesheet"/>
    <link th:href="@{/static/css/font-awesome.min.css}" rel="stylesheet"/>
    <link th:href="@{/static/css/animate.css}" rel="stylesheet"/>
    <link th:href="@{/static/css/bootstrap-table.css}" rel="stylesheet"/>
    <link th:href="@{/static/css/webuploader.css}" rel="stylesheet"/>
    <link th:href="@{/static/css/diyUpload.css}" rel="stylesheet"/>
    <link th:href="@{/static/css/style.css}" rel="stylesheet"/>
    <style type="text/css">
        ul {
            padding: 0;
        }

        .parentFileBox > .diyButton {
            text-align: left;
        }

        .row {
            margin-bottom: 10px;
        }

        .project-list .list-item {
            border: 1px solid #e5e5e5;
            position: relative;
            margin-right: 30px;
            display: inline-block;
            vertical-align: top;
            border-radius: 6px;
            padding: 0 31px;
        }

        .project-list .icon img {
            width: 150px;
            height: 150px;
            display: block;
            margin: 10px auto;
        }

        .project-list .add .icon img {
            cursor: pointer;
        }

        .project-list.empty {
            text-align: center;
        }

        .project-list p {
            font-size: 16px;
            text-align: center;
            margin-top: 20px;
        }

        .x-close {
            position: absolute;
            top: 0;
            right: 10px;
            font-size: 20px;
            color: #2a2a2a;
            cursor: pointer;
        }

        .x-close:hover {
            color: #000;
        }
    </style>
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="ibox-content">
        <div class="project-list">
            <div class="list-item add">
                <div class="icon">
                    <img th:src="@{/static/img/add.png}" src=""/>
                </div>
                <p>点击添加项目</p>
            </div>
            <div th:each="p : ${projects}" class="list-item">
                <span class="x-close" th:attr="data-id=${p.id}">x</span>
                <div class="icon">
                    <img th:src="@{${#strings.isEmpty(p.icon)} ? '/static/img/project.png' : ${session.picsUrlPrefix} + ${p.icon}}"
                         src=""/>
                </div>
                <p th:text="${p.name}">非税收入收费</p>
            </div>
        </div>
    </div>
</div>
<input id="apiUrlPrefix" type="hidden" th:value="${session.apiUrlPrefix}">

<script type="text/template" id="tpl">
    <form id="proejctForm" style="padding: 20px;" method="post" th:action="@{/project/add}">
        <div class="row">
            <label class="col-sm-3 control-label" style="margin-top: 8px;">项目名称：</label>
            <label class="col-sm-6">
                <input id="projectName" type="text" class="form-control" name="name" required=""
                       oninvalid="this.setCustomValidity('请输入项目名称')" oninput="setCustomValidity('')"/>
            </label>
        </div>
        <div class="row">
            <label class="col-sm-3 control-label" style="margin-top: 8px;">Application Id：</label>
            <label class="col-sm-6">
                <input id="applicationId" type="text" class="form-control" name="applicationId" required=""
                       oninvalid="this.setCustomValidity('请输入Application Id')" oninput="setCustomValidity('')"/>
            </label>
        </div>
        <div class="row">
            <label class="col-sm-3 control-label" style="margin-top: 8px;">项目ICON：</label>
            <div class="col-sm-9">
                <div id="box">
                    <div id="upload"></div>
                </div>
            </div>
            <input id="iconHidden" name="icon" type="hidden" value="">
        </div>
        <div class="row">
            <label class="col-sm-offset-3 col-sm-9 control-label"
                   style="margin-top: 8px;">建议尺寸：160*160像素，格式：png/jpg</label>
        </div>
        <div class="row col-sm-4 col-sm-offset-3">
            <button class="btn m-r btn-primary" type="submit">确定</button>
            <button id="cancelBtn" class="btn btn-danger" type="reset">取消</button>
        </div>
    </form>
</script>
<script th:src="@{/static/js/jquery.min.js}"></script>
<script th:src="@{/static/js/bootstrap.min.js}"></script>
<script th:src="@{/static/js/content.js}"></script>
<script th:src="@{/static/js/plugins/layer/layer.min.js}"></script>
<script th:src="@{/static/js/plugins/baiduUpload/diyUpload.js}"></script>
<script th:src="@{/static/js/plugins/baiduUpload/webuploader.html5only.min.js}"></script>
<script th:src="@{/static/js/modules/project/project.js}"></script>
</body>
</html>
